<template>
	<div>
  <el-dialog width="40%"  center :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="true" :close-on-press-escape="true" >
    <el-form class="appReourceForm" :disabled="extendsParam" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="110px" >
		<el-form-item prop="serverId" :label="$t('serverInfo.serverHost')" >
			<f-select v-model="dataForm.serverId" keyFiled="id" labelFiled="usePurpose"  size="mini" fUrl="/pc/serverInfo/page" :fParams="fSelectParams" ></f-select>
		</el-form-item>
		<el-form-item prop="remark" :label="$t('appResource.remark')" >
			<el-input size="mini" v-model="dataForm.remark" :placeholder="$t('appResource.remark')"></el-input>
		</el-form-item>
		<el-form-item prop="basePath" :label="$t('appResource.basePath')" >
			<el-input size="mini" v-model="dataForm.basePath" :placeholder="$t('appResource.basePath')"></el-input>
		</el-form-item>
		<el-form-item prop="basePort" :label="$t('appResource.basePort')" >
		  <el-input-number  :min="-1" :max="65535" size="mini" v-model="dataForm.basePort" :placeholder="$t('appResource.basePort')"></el-input-number>
		</el-form-item>
		<el-form-item prop="afterFileType" :label="$t('appResource.afterFileType')" >
			<ren-select size="mini" v-model="dataForm.afterFileType" paramCode="after_file_type" :placeholder="$t('appResource.afterFileType')"></ren-select>
		</el-form-item>
		<el-form-item v-if="dataForm.afterFileType == 2" prop="shellTxt" :label="$t('appResource.shellTxt')" >
			<el-input size="mini"  type="textarea" :autosize="{ minRows: 10}" v-model="dataForm.shellTxt" :placeholder="$t('appResource.shellTxt')"></el-input>
		</el-form-item>
		
		<el-form-item  v-if="dataForm.id > 0" prop="appVersion" :label="$t('appResource.appVersion')" >
			<el-tag  size="mini" type="info" :placeholder="$t('appResource.appVersion')">{{ dataForm.appVersion }}</el-tag>
		</el-form-item>

		<el-form-item prop="status" :label="$t('status')" size="mini">
			<el-radio-group size="mini"  v-model="dataForm.status">
				<el-radio :label="1">{{ $t('status1') }}</el-radio>
				<el-radio :label="0">{{ $t('status0') }}</el-radio>
			</el-radio-group>
		</el-form-item>
    </el-form>
	
	
    <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
      <el-button v-if="!isOnlyRead" type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
    </template>
	
	
  </el-dialog>
  
  </div>
</template>

<script>
import debounce from 'lodash/debounce'
import {  isMobile } from '@/utils/validate'
import Upload from '../oss/oss-upload'
export default {
  data () {
    return {
      visible: false,
	  isOnlyRead: false,

	  fSelectParams:{
		params:{
			pageSize:9999
		}  
	  },
      dataForm: {
        id: '',
		afterFileType: 0,
		shellTxt: '',
		basePath:'',
		serverId:'',
		status: 1,
		shellTxt:'',
		remark: '',
		basePort: -1
      }
    }
  },
  props:{
	  extendsParam:{
		  type: Boolean,
		  default: false
	  }
  },
  computed: {
    dataRule () {
      return {
        serverId: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        basePath: [
          { required: true, message: this.$t('validate.required'), trigger: 'change' }
        ],
		remark: [
		  { required: true, message: this.$t('validate.required'), trigger: 'blur' }
		]
      }
    }
  },
  components: {
    Upload
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
		if (this.dataForm.id) {
			this.getInfo()
		}
      })
	  this.isOnlyRead = this.extendsParam;
    },
    // 获取信息
    getInfo () {
      return this.$http.get('/pc/appResource/get',{params:{id:this.dataForm.id}}).then(({ data: res }) => {
        if (res.code !== 200) {
          return this.$message.error(res.msg)
        }
        this.dataForm = {
          ...res.data,
        }
		if( res.data.isPem ){
			this.serverPasswordType = '服务器私钥'
		}else{
			this.serverPasswordType = '服务器密码'
		}
      }).catch(() => {})
       
    },
	getPemUrl(pemu){
		this.dataForm.serverPassword = pemu
	},
	uploadPem(){
		this.uploadVisible = true
		this.$nextTick(() => {
		  this.$refs.upload.init()
		})
	},
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
		
		var url = !this.dataForm.id ? '/pc/appResource/add' : '/pc/appResource/modify';
	
		
        this.$http['post'](url, {
          ...this.dataForm,
        }).then(({ data: res }) => {
          if (res.code !== 200) {
            return this.$message.error(res.msg)
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        }).catch(() => {})
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>

<style lang="scss">

.appReourceForm label {
	line-height: 28px
}

</style>
